<template>
  <div class="demo-split">
    <Split v-model="split3" :max="0.836" :min="0">
      <div slot="right" class="demo-split-pane no-padding" id="contentMap">
        <Split v-model="split4" mode="vertical">
          <div slot="top" class="demo-split-pane">
            <BMap  :mapWidth="mapWidth" @showModel="handleShowModel"></BMap>
          </div>
          <div
            slot="bottom"
            class="demo-split-pane padding-l-10 padding-t-10"
            id="tabList"
            style="background-color:white; height:100%;"
          >
            <IndexBottom @toggleSize="handleToggleSize" :bigSize="bigSize"></IndexBottom>
          </div>
        </Split>
      </div>
      <div slot="left" class="demo-split-pane left-option">
        <span class="collapse-btn">
          <Button @click="toggle" type="primary" class="collapse-btn-b">
            <Icon type="ios-arrow-dropleft-circle" />
          </Button>
        </span>
        <div v-if="leftShow" class="left-option-warp">
          <UCollapse v-model="value2" simple style="border-radius: 0 5px 5px 0;">
            <UPanel name="1">
              <span class="collapse-dot"></span>
              <span>车辆列表</span>
              <div slot="content">
                <CarTreeList />
              </div>
            </UPanel>
          </UCollapse>
        </div>
      </div>
    </Split>
    <Modal
        v-model="modal1"
        title="全部车辆"
        :draggable="true"
        :scrollable="true"
        width="1300"
        >
        <IndexModel></IndexModel>
        <div slot="footer">
        </div>
    </Modal>
  </div>
</template>

<script>
// import BMap from "@/components/BMap.vue";
// import CarTreeList from "@/components/CarTreeList.vue";
import IndexBottom from "@/components/index-bottom/IndexBottom.vue";
import UPanel from "@/components/collapse/panel.vue";
import UCollapse from "@/components/collapse/Collapse.vue";
export default {
  components: {
    BMap:()=>import('@/components/BMap.vue'),   
    CarTreeList:()=>import('@/components/CarTreeList.vue'),
    IndexBottom,
    UPanel,
    UCollapse,
    IndexModel:()=>import('@/components/index-model/IndexModel.vue')
  },
  name: "MainHome",
  data() {
    return {
      split3: 0.163,
      split4: 0.93,
      mapWidth: "",
      isTrackPlayback: true,
      value1: [],
      value2: [],
      value3: [],
      modal1:false,
      bigSize:false,
    };
  },
  methods: {
    handleShowModel(){
      this.modal1=true
    },
    toggle() {
      this.split3 == "10px" || this.split3 == 0
        ? (this.split3 = 0.163)
        : (this.split3 = "10px");
    },
    moveEnd() {

      this.mapWidth =document.getElementById("contentMap").offsetHeight + "px";

    },
    handleToggleSize() {
      if(this.split4 >= 0.93){
        this.split4=0.42
        this.bigSize=true
      }else{
        this.split4=0.93
        this.bigSize=false
      }
     
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.mapWidth = document.getElementById("contentMap").scrollHeight + "px";
    });
  },
  computed: {
    leftShow() {
      return this.split3 == 0.163 ? true : false;
    },
  },
};
</script>

<style scoped>
.collapse-btn-b {
  margin-left: 6px;
  width: 24px;
  height: 60px;
  padding: 0;
  border-radius: 0 10px 10px 0;
}
.collapse-btn {
  position: absolute;
  top: 30%;
  left: 100%;
  z-index: 102;
}
</style>